.slides-container {
width:100%;min-height:30em;
}
#Home h1 {margin-top:0;}
#slide {
    position: relative;width:100%;align-items: center;
}

#prev, #next {
    background-color: rgb(0,0,0,0.5);
    position: absolute;
    top:40%;z-index: 5;
    padding:0.5em;color:white;
}
#prev{
    float:left;
    left:0;
} 
#prev:hover,#next:hover {     background-color: rgb(0,0,0,0.8);
 }
#next {
    right:0;
    float:right;
}
#imageHolder {
    vertical-align: middle;
    box-sizing: border-box;
    width: 50%;
}

.GOC {justify-items:center;display:flex;flex-direction:row;flex-wrap:wrap;
    list-style: none;margin-top: 20px;max-width:100%;
    align-content: space-around;
    justify-content: space-around;
    align-items: center;}
.GOC img { width:4em !important;min-width: auto; }

.GOC * {align-self:center;min-height:fit-content; word-break:keep-all;}
#enemy {max-width:max-content;display:inline-block;flex-grow:1;padding:20px;background: linear-gradient(to right bottom, gray, lightgray);border-radius: 25px;
float:left;}
#info {  max-width:max-content;display:inline-block; flex-grow:1;float:right; background-image: linear-gradient(to right, lightgray, white);
            max-width:10%;border-radius:25px;;text-align: center; padding-top:10px;color:black;
              }
#board {min-width:auto;display:inline-block;flex-grow:5;flex:none;align-self:center;border:solid brown 3px;
background-color:#333;height:40vh;min-width:35%;
min-height:35%;
 max-width:100%;box-sizing:border-box;}

.card {    display: flex;
    align-items: center;
    justify-content: center;
border-right:1px solid white;
}


.GOC button {cursor:pointer;  font-size:1vw; }

/* .card {margin:1vw;width:8vw;} */
img {cursor:grab;}
img {transition:.5s;/* margin-left:1vw;margin-right:1vw;*/ margin-top:1vh;margin-bottom:1vh;}

#handCards {display:flex;flex-wrap:wrap;justify-content:center;align-content:center;flex-direction:row;
background-color:transparent;width:100%;margin-left:0;margin-right:0;}
#handCards img {width:5rem; height:8rem;min-height:fit-content;}
#handCards img:hover { scale(1.1);}

.card {  background-color: gray; width:10em; height: 15em; 
float:left;} 
#handCards img:hover {transform:scale(1.1);max-width:99%;max-height:99%;}
#audioButton {border-radius:100%;min-width:max-content;width:5vw;height:5vw;background-color:white;position:absolute;float:left;top:85vh;left:1vw;bottom:1vw}
#audioButton:hover {background-color:#f1f1f1;color:black;}
#play {width:100%;align-self:center;float:right;background-color:white;}
#play:hover {background-color:#f1f1f1;}
button:hover { 
background-color: #f1f1f1;
color:#333; } 
#popup button {background-color:red;color:white;min-width:3rem;}
#popup button:hover {  transition:0.3s;background-color:white;color:red;  }
@media only screen and (max-width: 720px) {#board {min-height:40vh; /* overflow:hidden; */}
.upperCont {flex-wrap:wrap; flex-direction:column;  }
.upperCont * {min-width:fit-content;}
}
#board img {width:50px;height:75px; } 

.upperCont {
display:flex;justify-content:space-evenly;align-content:center;width:100%;margin-bottom:1em;
}
.navSide {
    transition:0.3s;
    cursor:pointer;text-decoration: none !important;min-width: max-content;text-align: center;word-wrap: break-word;word-break: break-all;min-height: max-content;font-size: unset;padding:1em;border: 1px solid black;
}
.navSide a {
    cursor:pointer;text-decoration: none !important;min-width: max-content;text-align: center;word-wrap: break-word;word-break: break-all;min-height: max-content;padding:1em;color:white;
}
.navSide:hover {
    transform: scaleX(1.2) ;border:1px solid white;
}
    a.sectA:visited, a.sectA:active {
     background-color: lightgreen !important;
    }



    .readMore {background-color:transparent;border:0;margin:0;padding:0; display:inline-block;word-wrap:break-word;text-overflow:ellipsis;word-break:break-all; color:blue;cursor:pointer; }
.readMore:hover {text-decoration:underline;color:red;}
/*
.container { display:flex; flex-direction:row;flex-wrap:wrap;
align-content:center;align-items:center;justify-content:center; margin:1em; padding:1em;} */

.item p {display:inline-block;word-wrap:break-word;text-overflow:ellipsis;word-break:break-all; padding:0;margin:0;
}
.item {min-width: auto;min-height: auto; text-align:center; padding:1em;/* border:1px solid black; */ word-wrap:break-word;text-overflow:ellipsis; margin:1em; /*max-width:24%;*/ flex:25%; align-self:center;}
 .item:hover { box-shadow: 4px 4px 8px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

html, body {width:100%;word-break:break-all;word-wrap:break-word;
box-sizing:border-box;
}
 *, *:after, *:before {box-sizing:inherit;margin:0;}
header, footer {width: 100%}

#Games p {padding:1em;}
.main {min-height:max-content;min-height:-moz-max-content;}
footer a {
    word-break: keep-all !important;display: inline-block !important;
}
#Contact-Us {
    margin:0;
    padding:0;
    background-color: #333;
    width:100%;
    color: aliceblue;
}
section {max-width:100% !important;}
#Games {max-width:100%;box-sizing:border-box;}
#Games * {box-sizing:border-box;}
section {
    margin-left: 0;margin-right: 0;
}
/* .slide {
  
    background-size: cover;
    width:100%;
    height: 50rem;
    margin: 0;
} */

form {
    color:#f1f1f1;
    float:right; 
   /* width:45%; */
    min-height:100%;
}

#Contact-Us form * {
    color:#f1f1f1;
    width:100%;
    padding:10px;
    line-height:normal;

}
#Contact-Us .inb {
    display: inline-block;
    width:50%;
    line-height:2;
    text-align: left;
}

form textarea {
    min-height:300px
}

#Contact-Us .inb p {
    list-style: disc;
    
}
p:first-child {margin-left:4px;}
input , textarea{
        background-color: #4B5557;    color:#f1f1f1;
}
#Contact-Us form input[type=submit]:hover {
    border:1px solid black;
    background-color: #f1f1f1; 
    color:black;cursor:pointer;
}
summary ~ p:before { content: "     ";}
section center h1 {
/*    padding:5%;*/
    font-size:2rem;
}
summary {
    cursor:pointer;
}


#Other #links div {
    align-content: center;
    align-items: center;
    text-align: center;
    width:100%;
    transition: 0.2s;
    height:5rem;
    color:black;
    position: relative;
}

#Other #links a {
    align-content: center;
    align-self: center;
   text-decoration: none;
    color:black;
    height:inherit;
    width:100%;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#Other #links div:hover {
    background-color: lightblue;
    color:#333;
    cursor:pointer;
}
#Other {
   
}


       .main section {
        margin-top: 0;margin-bottom: 0;
           text-align:center; min-height:max-content;min-height: -moz-max-content;
           /* padding:50px; */
        }
        .body {  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
        flex-direction: column;flex-wrap: wrap;flex-basis: auto;}
.main section:not(:last-child) {border-bottom:solid black 1px;}
   .main section.active {
  border-right:solid 10px yellow; border-left:solid 10px blue;
    }

header {background-color:black;width: 100%;}

.col {display:inline-block; margin:5px; width:2vw;flex-grow:1;height:100% !important;}

.link {width:5vw;}

.col p {text-align:center;}

.col h6 {margin-top:5px;}

.col p {margin-bottom:5px;}

header a {text-decoration:none; color:white;}

header a:hover {color:lightblue;}

.bottom {  padding:15px;display:flex; flex-direction:row;justify-content:space-between;align-items:stretch;  }
footer * {width:100%;color:#969696;}
footer a {text-decoration:none; color:white;}
footer a:hover {color:lightblue;}
footer, .footer {bottom:0;background-color:#000000;color:#969696; 
margin:0;padding: 10px; width:100% !important;
margin-top:0;margin-bottom:0px;min-height:25%;
}
 .topBtn {transition: 0.3s;background-color: #f1f1f1;font-weight: 900;
position: fixed;
right: 1em;
bottom: 1em;
min-width: 3em;
min-height: 3em

}
    .topBtn:hover {
        background-color: #1818de !important;
        color:white;
    }

@media and (max-width:360px){
.top {flex-direction:column;}
}

header, .header {top:0;background-color:#000000;color:#969696; margin-top:0px; width:100% !important;
 /* margin-left:0px;margin-right:0px; */}
 @media and (max-width:600px){
/*.bottom {flex-direction:column; */}
header * {width:100% !important;margin-bottom:10px;margin-top:10px; }
} 
    .banner {
        width:100%;margin:0;padding:1em;
        font-size: 2em;background-color: yellow;min-height:min-content;min-height:-moz-min-content;
    }


   
#navbar__list {position:fixed;right:0; transition:0.8s; top:40%;list-style: none}   

.navSide {
    padding:1px; min-height:2em; color:white;  border-radius:10em 0 0 10em; 
}
    .navSide:hover {
        transform: scaleX(1.2);
    }
    
a.sectA {

}
    a.sectA:visited, a.sectA:active {
     background-color: lightgreen !important;
    }
    .readMore {background-color:transparent;border:0;margin:0;padding:0; display:inline-block;word-wrap:break-word;text-overflow:ellipsis;word-break:break-all; color:blue;cursor:pointer; }
.readMore:hover {text-decoration:underline;color:red;}
.container { 
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction:row;flex-wrap:wrap;
align-content:center;align-items:center;justify-content:center; margin:0;padding:1em;}
.item p {display:inline-block;word-wrap:break-word;text-overflow:ellipsis;word-break:break-all; padding:0;margin:0;
}
    .container * {box-sizing: border-box;}
.item {cursor:pointer;
    min-width: auto;min-height: auto; box-sizing: border-box; text-align:center; padding:1em;/* border:1px solid black; */ word-wrap:break-word;text-overflow:ellipsis; margin-bottom:1em; /*max-width:24%;*/flex:25%; align-self:center;}
 .item:hover { box-shadow: 4px 4px 8px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

    .activeNav  {
        background-color: #f1f1f1 !important;color:#333 !important;
    }
.activeNav a { color:#333 !important;}

@media only screen and (max-width:600px){
    .container, .footer, .top, #nav, .main, .body {
        display:flex;
        flex-direction: column;
        flex-wrap: wrap;
        max-width: 100%;
    }

    
}

@-moz-document url-prefix() {
   .footer a {
  display: inline-block;
word-break: keep-all;
    
    }
} 

.qCont {
    display:block;min-height: 3em;
}
.expander {
    border-right:2px solid white;color:white;background-color: lightgreen;
    min-height:inherit;height:inherit;display:inline-block;width:20%;vertical-align:top;
}
.expander:hover {
    opacity:0.8;
}
.question {
text-align:center;
padding-top:1em;background-color:green;color:white;min-height:inherit;display:inline-block;max-width:max-content;
padding-left:1em;padding-right:1em;width:60%;
}
.qCont:last-child {
    margin-bottom: 200px;
}
#FAQ {
    padding-top: 10em;
}

body, * {margin:0px;padding:0px;word-wrap:break-word;box-sizing:border-box;}
header {background-color:black;}
.col {display:inline-block; margin:5px; width:2vw;flex-grow:1;height:100% !important;}
.link {width:5vw;}
.col p {text-align:center;}
.col h6 {margin-top:5px;}
.col p {margin-bottom:5px;}
header a {text-decoration:none; color:white;}
header a:hover {color:lightblue;}
.bottom {  padding:15px;display:flex; flex-direction:row;justify-content:space-between;align-items:stretch;  }
footer * {width:100% !important;margin-top:10px;margin-bottom:10px; }
footer a {text-decoration:none; color:white;}
footer a:hover {color:lightblue;}
footer, .footer {bottom:0;background-color:#000000;color:#969696; 
margin-bottom:0px; width:100% !important;
 margin-left:0px;margin-right:0px;}
@media and (max-width:600px){
.top {flex-direction:column;}

header, .header {top:0;background-color:#000000;color:#969696;
 margin-top:0px; width:100% !important;}

.bottom {flex-direction:column;}
header * {width:100% !important;margin-bottom:10px;margin-top:10px; }

}